<script setup>
import { useRouter } from 'vue-router';
import StatusBar from "../common/StatusBar.vue"


const router = useRouter()
const curPage = ref('checkTeachingProject')
const handleUpdateValue = (value) => {
        curPage.value=value
        router.push({ name: value })
}
const menuOptions=[
    {label:'教学项目',key:'checkTeachingProject'},
    {label:'课程建设项目',key:'checkCourse'},
    {label:'教学论文',key:'checkPaper'},
    {label:'教学获奖',key:'checkTeachingAward'},
    {label:'学生竞赛获奖',key:'checkStudentCompetition'},
    {label:'成果查询',key:'achievementQuery' },
    
]
</script>

<template>
  <StatusBar></StatusBar>
  <n-layout has-sider style="margin-top: 1px; height: 100vh; ">
        <n-layout-sider bordered content-style="padding: 0px; " width="210" class="menuClass">
            <n-menu :value="curPage" :options="menuOptions"  @update:value="handleUpdateValue" style="font-size:17px ;letter-spacing: .1em;" />
        </n-layout-sider>
        <n-layout-content content-style="padding:  30px 20px 0 20px;overflow-y:hidden;">
            <router-view/>
        </n-layout-content>
    </n-layout>
</template>

<style>
.n-menu .n-menu-item-content.n-menu-item-content--selected::before {
    background-color:rgb(5,93,163);
    --n-item-color-active-hover:rgb(5,93,163);
}
.n-menu-item-content--selected > .n-menu-item-content-header {
    /* background-color: rgb(5,93,163); */
    --n-item-text-color-active: white;
    --n-item-text-color-active-hover:  white;
}
.n-menu-item-content::before {
    --n-item-color-hover: rgb(5,93,163);
    border-bottom: 1px dashed rgb(193, 217, 237);

}
.n-menu-item-content-header{
    --n-item-text-color-hover:  white;
    font-family: "Microsoft Yahei","Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
